<script setup lang="ts">
import { getDownloadUrl, getRequestingHeader, getUploadUrl } from "@/core";
import { IActionParam, IParam } from "@interface";
import { ref, Ref } from "vue";
interface UploadProps {
  /**
   * 传入值
   * @type {any}
   * @memberof UploadProps
   */
  value: number;

  /**
   * 属性项名称
   *
   * @type {string}
   * @memberof UploadProps
   */
  name: string;

  /**
   * 接收文件类型
   *
   * @type {boolean}
   */
  accept: string;

  /**
   * 上传请求的 http 方法
   *
   * @type {boolean}
   */
  method: string;

  /**
   * 文件是否多选
   *
   * @type {boolean}
   */
  multiple: boolean;

  /**
   * 是否展示文件列表
   *
   * @type {boolean}
   */
  showUploadList: boolean;

  /**
   * 按钮提示信息
   *
   * @type {boolean}
   */
  Tooltip: string;

  /**
   * 只读模式
   *
   * @type {boolean}
   */
  readonly?: boolean;

  /**
   * 是否禁用
   * @type {boolean}
   * @memberof AppUpload
   */
  disabled?: boolean;
}

interface EditorEmit {
  (name: "editorEvent", value: IActionParam): void;
}

const props = withDefaults(defineProps<UploadProps>(), {
  disabled: false,
  readonly: false,
  method: 'post',
  multiple: true,
  showUploadList: true,
  Tooltip: '点击上传'
});
const emit = defineEmits<EditorEmit>();
const uploadUrl = getUploadUrl();
const downloadUrl = getDownloadUrl();
const headers = getRequestingHeader();
const fileList: Ref<IParam[]> = ref([])
const previewFile = (file: IParam) => {
  //todo
}
const onChange = (value: number) => {
  emit("editorEvent", {
    tag: props.name,
    action: "valueChange",
    data: value,
  });
};
</script>

<template>
  <div :class="['app-editor-container', `app-upload-${name}`]">
    <a-upload
      :action="uploadUrl"
      :method="method"
      v-model:fileList="fileList"
      :headers="headers"
      :multiple="multiple"
      :previewFile="previewFile"
      :showUploadList="showUploadList"
      :disabled="disabled || readonly"
      @change="onChange">
    <a-button>
      <upload-outlined></upload-outlined>
      {{Tooltip}}
    </a-button>
    </a-upload>
  </div>
</template>

<style scoped>
.app-editor-container {
  width: 100%;
  height: 100%;
}
</style>
